<template>
  <div class="container" @viewappear="viewAppear">
    <navbar title="设置地区" theme="light"></navbar>
    <div style="margin-top: 10;">
      <wxc-cell :title="(cityName + districtName) || '请选择地区'"
                @wxcCellClicked="showDistrictSelector"
                :has-top-border="true">
        <text class="icon location-icon" @click="gpsLocation()">&#xe652;</text>
      </wxc-cell>
    </div>
    <div class="btn-wrapper">
      <text :class="['btn-primary','btn','btn-large', 'activeable']" @click="save(true)">保存</text>
    </div>
    <region-selector ref="districtSelector" level="2" @select="selectDistrict"></region-selector>
  </div>
</template>
<style lang="scss">
  @import "./sass/var";
  @import "./sass/mixin";
  @import "./sass/utilities";
  @import "./sass/icon";
  @import "./sass/buttons";
  @import "./sass/activeable";
  .container {
    background-color: $body-bg;
  }
  .cell-value {
    font-size: 30px;
    color: $brand-primary;
  }
  .btn-wrapper {
    margin: 50px 20px;
  }
  .location-icon {
    font-size: 50px;
    color: $color;
    width: 100px;
    height: 60px;
    line-height: 60px;
    text-align: right;
  }
</style>
<script>

import {WxcCell} from 'weex-ui'
import Nat from 'natjs'

let api = require('./include/api')
let theme = require('./include/theme')
let modal = weex.requireModule('modal')
let navigator = require('./include/xnavigator')
let storage = require('./include/xstorage')
require('./include/page-xdom')
module.exports = {
  mixins: [

  ],
  components: {
    navbar: require('./components/navbar.vue'),
    'region-selector': require('./components/region-selector.vue'),
    WxcCell
  },
  props: {
    back: {default: true},
    height: {default: 0}
  },
  data () {
    return {
      isLoadingShow: false,
      customStyles: {
        lineSpacing: '14px',
        width: '160px',
        height: '80px',
        icon: '',
        color: theme.color.default,
        checkedColor: '#ffffff',
        disabledColor: '#eeeeee',
        borderColor: '#ddd',
        checkedBorderColor: theme.brand.primary,
        backgroundColor: '#ffffff',
        checkedBackgroundColor: theme.brand.primary
      },
      lat: '',
      lng: '',
      cityName: '',
      districtName: '',
      cityId: '',
      districtId: ''
    }
  },
  created () {
    this.loadData()
  },
  mounted () {

  },
  methods: {
    loadData () {
      api.user.location().done(rs => {
        let data = rs.data
        this.cityId = data.cityId
        this.cityName = data.city
        this.districtId = data.districtId
        this.districtName = data.district
        if (!data.districtId) {
          this.gpsLocation()
        }
      })
    },
    viewAppear () {
      if (!this.districtId) {
        this.gpsLocation()
      }
    },
    gpsLocation () {
      Nat.geolocation.get((err, ret) => {
        this.lat = ret.latitude
        this.lng = ret.longitude
        api.amap.geoCode.regeo({
          lat: this.lat, lng: this.lng
        }).done(rs => {
          let data = rs.data
          if (data.status === '1') {
            let addr = data.regeocode.addressComponent
            if (typeof addr.city === 'string') {
              this.cityName = addr.city
            } else {
              this.cityName = addr.province
            }
            if (!this.districtId) {
              this.districtId = addr.adcode
              this.districtName = addr.district
              this.save()
            } else {
              this.districtId = addr.adcode
              this.districtName = addr.district
            }
          }
        })
      })
    },
    save (flag) {
      if (!this.districtId) {
        modal.alert({message: '请先选择地区！'})
        return
      }
      api.user.setDistrict({
        id: this.districtId
      }).done(rs => {
        if (flag) {
          modal.toast({message: '保存成功', duration: 0.3})
          storage.setItem('LOCATION_SET_SUCCESS', true).done(() => {
            navigator.pop()
          })
        } else {
          let data = rs.data
          this.cityId = data.cityId
          this.cityName = data.city
          this.districtId = data.districtId
          this.districtName = data.district
        }
      })
    },
    showDistrictSelector () {
      this.$refs.districtSelector.show()
    },
    selectDistrict (region) {
      this.districtName = region.district.name
      this.cityId = region.city.id
      this.cityName = region.city.name
      this.districtId = region.district.id
    }
  }
}
</script>
